<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>QQ系统</title>
    <link rel="stylesheet" type="text/css" href="/static/plugins/layui2.7.6/css/layui.css" />
    <script type="text/javascript" src = "/static/plugins/layui2.7.6/layui.js"></script>

    <style>
        .loginForm {
            width: 350px;
            height: 400px;
            padding: 30px 20px;
            margin-top: 100px;
            border-radius: 8px;
            box-shadow: 0 0 5px black;
            box-sizing: border-box;
        }

    </style>

</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md4 layui-col-md-offset4">

            <div class="loginForm">
                <span ${message == null ? "style='dispaly:none'" : "style='color:red'"}>${message}</span>
                <h2 style="text-align: center">订餐管理系统</h2>
                <form class="layui-form" lay-filter="formData"  method="post" action="/login">

                    <div class="layui-form-item">
                        <label>用户名:</label>
                        <div class="layui-form-block">
                            <input type="text" name="username" required lay-verify="required|username"
                                   placeholder="请输入用户名" class="layui-input" value="${username}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label>密码:</label>
                        <div class="layui-form-block">
                            <input type="password" name="password" required lay-verify="required|password"
                                   placeholder="请输入密码" class="layui-input" value="${password}">
                        </div>
                    </div>

                    <!-- 验证码-->
                    <div class="layui-form-item">
                        <label>验证码:</label>
                        <div class="layui-form-block">
                            <input style="width: 100px;display: inline" type="text" name="vcode" required lay-verify="required|vcode"
                                   placeholder="请输入验证码" class="layui-input">
                            <img src="/code" alt="验证码" title="看不清，换一张" onclick="this.src='/code?'+Math.random()" />
                        </div>

                    </div>

                    <div class="layui-form-item">
                        <div class="layui-form-block">
                            <input type="checkbox" name="isRemember" lay-skin="primary" title="记住我" ${isRemember == true ? "checked" : ""}>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-form-block">
                            <button class="layui-btn" lay-submit lay-filter="loginForm" id="submitBtn">登录</button>
                            <a class="layui-btn layui-btn-normal" href="/register">注册</a>
                        </div>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>

<script>
    layui.use(['form','jquery'],function () {

        var form = layui.form;
        var $ = layui.jquery;

        // 点击事件
        $('#submitBtn').on('click',function (data) {

                 form.verify({
                     username: function (value) {
                         if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                             return '用户名不能有特殊字符';
                         }
                         if(/(^\_)|(\__)|(\_+$)/.test(value)){
                             return '用户名首尾不能出现下划线\'_\'';
                         }
                         if(/^\d+\d+\d$/.test(value)){
                             return '用户名不能全为数字';
                         }
                     },
                     password: [
                         /^[\S]{6,12}$/,
                         '密码必须6到12位，且不能出现空格'
                     ],
                     vcode: function (value) {
                        if(!new RegExp("^[a-z0-9]{4}$").test(value)) {
                            return '验证码由小写与数组组成，长度为4'
                        }
                     }
                 })
            // });
             // 返回 true 可以提交表单
            return true;
        });
    });
</script>


</body>
</html>